<template>
  <el-container>
    <el-header height="48px">
      <i class="el-icon-office-building"></i>
      所有科室信息展示
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="id"
          prop="id">
        </el-table-column>
        <el-table-column
          label="科室名"
          prop="name">
        </el-table-column>
        <el-table-column
          label="科室前缀"
          prop="prefix">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header">
            <el-button type="success" size="medium" 
              icon="el-icon-plus" circle
              @click="handleAddNew"
              ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[pageInfo.pageSize]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-main>

    <!-- 详情提示框 -->
    <el-dialog
      title="科室详情"
      :visible.sync="detailDialogVisible"
      width="30%">
        <el-table :data="detailData">
          <el-table-column property="detailName" label="详情名"></el-table-column>
          <el-table-column property="detailValue" label="详情值"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改信息" :visible.sync="updateDialogVisible" width="600px">
      <el-form :model="updateForm" label-position="right">
        <el-form-item label="科室名" :label-width="formLabelWidth">
          <el-input v-model="updateForm.name" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="科室前缀" :label-width="formLabelWidth">
          <el-input v-model="updateForm.prefix" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除提示 -->
    <el-dialog
      title="删除提示"
      :visible.sync="deleteDialogVisible"
      width="28%">
      <span>您正在执行删除科室信息操作<br/><br/>此操作不可逆，确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增对话框 -->
    <el-dialog title="新增科室" :visible.sync="addNewDialogVisible" width="600px">
      <el-form :model="addNewForm" label-position="right">
        <el-form-item label="科室名" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.name" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
        <el-form-item label="科室前缀" :label-width="formLabelWidth">
          <el-input v-model="addNewForm.prefix" autocomplete="off" style="width: 380px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddNew">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        pageInfo: [],
        tableData: [],
        pageSize: 8,
        currentPage: 1,
        detailData: [],
        updateForm: {},
        addNewForm: {
          name: "",
          prefix: ""
        },
        emptyForm: {
          name: "",
          prefix: ""
        },
        detailDialogVisible: false,
        updateDialogVisible: false,
        deleteDialogVisible: false,
        addNewDialogVisible: false,
        needDeleteId: -1,
        formLabelWidth: '100px'
      }
    },
    methods: {
      handleDetail(index, row) {
        this.detailData = [];
        let detailKeys = Object.keys(row);
        for (let i of detailKeys) {
          if (i == "id") {
            this.detailData.push({"detailName": "id", "detailValue": row[i]});
          } else if (i == "name") {
            this.detailData.push({"detailName": "科室名", "detailValue": row[i]});
          } else if (i == "prefix") {
            this.detailData.push({"detailName": "前缀", "detailValue": row[i]});
          } 
        }
        this.detailDialogVisible = true;
      },
      handleEdit(index, row) {
        this.updateForm = {...row};
        this.updateDialogVisible = true;
      },
      handleDelete(index, row) {
        this.needDeleteId = row.id;
        this.deleteDialogVisible = true
      },
      handleAddNew() {
        this.addNewForm = {...this.emptyForm};
        this.addNewDialogVisible = true;
      },
      getDeptPageInfo(currentPage, pageSize) {
        this.$axios.get(`http://localhost:8080/admin/dept/${currentPage}/${pageSize}`).then(result=>{
          if (result.data.code == 200) {
            this.pageInfo = result.data.data;
            this.tableData = [...this.pageInfo.list];
          } else {
            this.$message.error("分页查询科室信息失败");
          }
        });
      },
      handleCurrentChange(val) {
        this.getDeptPageInfo(val, this.pageSize);
        this.currentPage = val;
      },
      doDelete() {
        this.$axios.delete(`http://localhost:8080/admin/dept/${this.needDeleteId}`).then(result=>{
          if (result.data.code == 200) {
            this.getDeptPageInfo(this.currentPage, this.pageSize);
            this.deleteDialogVisible = false;
            this.$message({
              showClose: true,
              message: "科室信息删除成功"
            });
          } else {
            this.deleteDialogVisible = false;
            this.$message.error("科室信息删除失败");
          }
        });
      },
      doUpdate() {
        // 整理修改数据
        const department = {};
        department.id = this.updateForm.id;
        department.name = this.updateForm.name;
        department.prefix = this.updateForm.prefix;

        // 发送修改请求
        this.$axios.put("http://localhost:8080/admin/dept", department).then(result=>{
          if (result.data.code == 200) {
            this.getDeptPageInfo(this.currentPage, this.pageSize);
            this.updateDialogVisible = false;
            this.$message({
              showClose: true,
              message: "科室信息修改成功"
            });
          } else {
            this.updateDialogVisible = false;
            this.$message.error("科室信息修改失败");
          }
        });
      },
      doAddNew() {
        // 整理新增数据
        const department = {};
        department.name = this.addNewForm.name;
        department.prefix = this.addNewForm.prefix;

        console.log(department);

        // 发送新增请求
        this.$axios.post("http://localhost:8080/admin/dept", department).then(result=>{
          if (result.data.code == 200) {
            this.handleCurrentChange(1)
            this.addNewDialogVisible = false;
            this.$message({
              showClose: true,
              message: "新增科室信息成功"
            });
          } else {
            this.addNewDialogVisible = false;
            this.$message.error("新增科室信息失败");
          }
        });
      },
    },
    mounted() {
      this.getDeptPageInfo(1, this.pageSize);
    },
  }
</script>

<style scoped>
  .el-header {
    background-color: transparent;
    color: #333;
    text-align: left;
    line-height: 48px;
  }
  
  .el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-radius: 8px;
  }
  .el-main .el-pagination{
    margin-top: 20px;
  }
</style>